
<template>
  <div class="planDetails">
    <van-nav-bar title="title 7日抢先计划二十五期" left-arrow @click-left="onClickLeft"/>
    <!-- 预期年化利率 -->
    <div class="profit">
      <div class="flex profit-list">
        <div class="profit-item">
          <div class="profit-icons">
            <div>{{$route.query.annualInterestRate}}%</div>
          </div>
          <div class="profit-text">预期年化利率</div>
        </div>
        <div class="profit-item">
          <div class="profit-icons">
            <div style="color:#333333">{{$route.query.lockedDays}}天</div>
          </div>
          <div class="profit-text">锁定期</div>
        </div>
      </div>
      <!-- 100%兑付 -->
      <div class="conversion">
        <div style="flex:1">100%兑付</div>
        <div>|</div>
        <div style="flex:1">账户安全保障</div>
        <div>|</div>
        <div style="flex:1">{{$route.query.productType}} {{$route.query.virtualWalletName}}起购</div>
      </div>
    </div>
    <div class="xian"></div>
    <!-- 申购倒计时 1天18小时20分钟 -->
    <div class="time">
      <div class="subscribe">申购倒计时 {{calcTime}}</div>

      <div style="display:flex;justify-content: center;margin-top:20px;" class="conversion">
        <div>
          <img src="../../../assets/images/icon-dot.png" alt>
        </div>
        <span style="color:#CBCBCB">————————</span>
        <div>
          <img src="../../../assets/images/icon-dot.png" alt>
        </div>
        <span style="color:#CBCBCB">————————</span>
        <div>
          <img src="../../../assets/images/icon-dot.png" alt>
        </div>
        <span style="color:#CBCBCB">————————</span>
        <div>
          <img src="../../../assets/images/icon-dot.png" alt>
        </div>
      </div>

      <!-- 认购开始 2019-04-30 14:00 -->
      <div class="subscription">
           <div>认购开始 {{name.subscriptionStartTime}}</div>
           <div>起息日 {{name.maturityTime}}</div>
           <div>到期日 {{name.receiptTime}}</div>
           <div>预期收款日 {{name.startInterestTime}}</div>
      </div>
    </div>
    <div style="margin-top:20px;" class="xian"></div>

     <!-- 产品信息 -->
     <div class="product">
         <div>产品信息</div>
         <p></P>
         <ul style="text-align: left;">
             <li>产品类别 <span>固定收益</span></li>
             <li>产品总规模 <span style="margin-left:25px">1BTC</span></li>
             <li>收益方式 <span>一次性还本付息</span></li>
             <li>投资去向 <span>由本平台精选的量化套利投资组合</span></li>
             <li>固定期限理财，产品结束前不可退出</li>
         </ul>
     </div>
     <div style="margin-top:20px;" class="xian"></div>
     <!-- 常见问题 -->
      <div class="login-content">
     <section class="cent">
                <van-cell @click="security" title="安全保障" is-link></van-cell>
                <van-cell @click="common" title="常见问题" is-link></van-cell>
            </section>
            </div>
       <div style="margin-top:18px;">剩余可认购额度  0.29BTC</div>    
            <!-- 按钮 -->
      
           <div class="content">  
            
             <div v-if="this.$store.state.isLogin == false" class="foor" >
              <router-link :to="{name: 'login',query:{}}" tag="li" class="list-item">
               <button>认购</button>
             </router-link>
            </div>
            <div v-else class="foor">
             <router-link :to="{name: 'buy',query:{}}" tag="li" class="list-item">
               <button>认购</button>
             </router-link>
            </div>
           </div>     
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import { coinPlan } from "../../../axios/api.js";
import { NavBar, Toast, Icon, Cell,} from "vant";
export default {
  name:"planDetails",
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [Cell.name]: Cell
  },
  
  data() {
    return {
      isLogin: false,
      calcTime:'',
      active: 0,
      data: {
        page: "1",
        rows: "6"
      },
      name:[],
       
     
    };
  },

  watch:{
			timeleftSec:{
				handler(newVal){
					this.num(newVal)
				}
			},
			timeleftMin:{
				handler(newVal){
					this.num(newVal)
				}
			}
		},
  methods: {
    //返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 跳转安全问题页面
     security() {
           
            this.$router.push("/security");
        },
      //常见问题跳转
      common() {
           
            this.$router.push("/common");
        },

        //进入注册页
        login() {
            this.$router.push("/login");
        },
         num:function (n) {
			 	return n<10 ? "0" + n : "" + n
			 },
        	 timerun() {
			 	var expiredDate=new Date(this.name.expired_time).valueOf();
			 	console.log(this.name.expired_time)
			 	this.timer=setInterval(()=>{
			 		var nowDate=new Date().valueOf();
			 		var calcData=Math.floor((expiredDate-nowDate)/1000);
			 		var min=Math.floor(calcData/60%60);
			 		if(min<10){
			 			min='0'+min
			 		}
			 		var sec=Math.floor(calcData%60);
			 		if(sec<10){
			 			sec='0'+sec;
			 		}
			 	    var str=min+':'+sec;
			 		this.calcTime=str;
			 		
			 		
			 	},1000)
			 	
			 },
  },
   created() {
     this.timerun()
    coinPlan({
      params: this.data
    }).then(res => {
       this.name = res.data.data.listCoinPlan
       console.log(JSON.stringify(res))
    });
  }
};
</script>


<style lang="less" scoped>
@import "../../../assets/less/variable.less";
.planDetails {
    width: 100%;
    height: 100vh;
    overflow-y:auto;
  background: #ffffff;

  .profit {
    // width: 100%;
    margin: 10px 0;
    .profit-title {
      padding: 10px 0;
      font-size: @base_textSize;
      color: @base_textColor;
    }
    .profit-list {
      padding: 10px 0;
      .profit-item {
        width: 50%;
        .profit-icons {
          font-size: 2em;
          color: #d1a658;
        }
        .profit-text {
          font-size: 14px;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          margin-top: 15px;
        }
      }
    }
    // 兑换
    .conversion {
      display: flex;
    }
    .conversion div {
      font-size: 12px;
      font-family: PingFang-SC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-top: 26px;
    }
  }
  .xian {
    width: 100%;
    height: 10px;
    background: #f6f6f8;
  }
  .time {
    padding: 10px 0;
  }
  .time .subscribe {
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(209, 166, 88, 1);
    text-align: left;
    margin-left: 25px;
  }
  .time img {
    width: 8px;
    height: 8px;
  }
//   认购开始
 .subscription{
     width: 100%;
     display: flex;
     justify-content:space-around;
 }
 .subscription>div{
     width:70px;
    height:35px;
    font-size:11px;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    margin-top: 10px;

 }
//  产品信息
 .product>div{
     font-size:16px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    margin-left: 25px;
    text-align: left;
    margin-top: 17px;
   
   
 }
 .product P{
      border-bottom: 1px solid #EFEFEF;
      margin-top: 17px;
 }
 ul li{
     font-size:14px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height: 16px;
    margin-left: 25px;
    margin-top: 8px;
 }
 ul li span{
   color: #333333;
   margin-left: 40px;
 }
 .van-cell__title {
            text-align: left;
            font-size:16px;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
        }
        // 认购额度
     
      .foor button{
        width: 100%;
        height: 40px;
        background: #D1A658;
        position:fixed;
        bottom: 0;
        left: 0;
        right:0;
        margin: auto;
        font-size:18px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
        border: 1px solid #D1A658;
      }

 
}
</style>

